<template>
    <el-container>
        <el-header>
            <el-row type="flex" justify="space-between" align="middle">
                <!-- span起辅助作用 目的是为了flex布局 -->
                <span></span>
                <h1 style="color: #fff;">学生信息管理系统</h1>
                <el-popover placement="top-start" width="200" trigger="click">

                    <div style="text-align: center;">
                        <div>{{$store.state.userInfo.realName}}</div>
                        <el-divider></el-divider>
                        <div> <el-button type="text">
                            <router-link to="/home/mine" tag="span">个人信息</router-link>
                        </el-button></div>
                       <div><el-button type="text" @click="loginOut">退出登录</el-button></div>
                        
                    </div>

                    <template #reference>
                        <el-avatar>
                            <img :src="'/student/v3'+$store.state.userInfo.avatar" alt="">
                        </el-avatar>
                    </template>
                </el-popover>

            </el-row>

        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu router :default-active="$route.path" background-color="#304156" text-color="#ffffff"
                    active-text-color="#ffffff">
                    <el-menu-item index="/home/index">
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="/home/classes">
                        <span slot="title">班级管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/student">
                        <span slot="title">学生管理</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
    </el-container>

</template>

<script>
export default {
    name: "Name",
    data() {
        return {}
    },
    created() { 
        this.$store.dispatch("getUserInfo")
    },
    methods: {
        loginOut(){
            this.$confirm('确定注销并退出系统吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning',
            }).then(()=>{

            }).catch(()=>{
                
            })
        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep(.el-divider--horizontal){
    margin: 10px 0;
}
.el-container {
    height: 100vh;

    .el-header {
        background-color: #304152;
        height: 80px !important;
        padding: 0 80px;
        box-sizing: border-box;
    }

    .el-aside {
        background-color: #304156;

        .is-active {
            background-color: #263445 !important;
        }

        .el-menu {
            border: none;
        }
    }


}
</style>